<script lang="ts" setup>
import { BMap, BMarker, _Point } from 'vue3-baidu-map-gl'
import { ref, computed } from 'vue'
import { getBikeList } from "../../api/bike.js"

const center = { lng: 116.404901, lat: 39.915185 }
const points = ref<_Point[]>([center])
const data = ref<_Point[]>([center])

function getData() {
    getBikeList(1, 100, "", "").then(res => {
        points.value = res.data.records.map((item: any) => ({
            lat: Number(item.longitude),   // 纬度
            lng: Number(item.latitude), // 经度

        }))
        console.log("point:");
        console.log(points.value);
    })
}
getData()
</script>

<template>
    <BMap :center="center" style="height: auto;">
        <BMarker v-for="(item, index) in points" :key="index" :position="item" icon="loc_red" />
    </BMap>
    <!-- <button class="myButton no-m-b" type="button" @click="getData">更新</button> -->

    <!-- <BMap :center="center">
        <BMarker v-for="(item, index) in data" :key="index" :position="item" icon="loc_red" />
    </BMap>
    <button class="myButton no-m-b" type="button" @click="handleUpdate">更新</button> -->
</template>
